<template>
  <div>
    <Card shadow>
      <Form
        ref="searchForm"
        :model="pageParams"
        inline
        :label-width="80">
        <FormItem label="AppId" prop="appId">
          <Input type="text" v-model="pageParams.appId" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem label="中文名称" prop="appName">
          <Input type="text" v-model="pageParams.appName" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem label="英文名称" prop="appName">
          <Input type="text" v-model="pageParams.appNameEn" placeholder="请输入关键字"/>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSearch()">查询</Button>&nbsp;
          <Button @click="handleResetForm('searchForm')">重置</Button>
        </FormItem>
      </Form>
      <div class="table-operator">
        <ButtonGroup>
          <Button
            :disabled="$auth('systemAppEdit')?false:true"
            class="search-btn"
            type="primary"
            @click="handleModal()">
            <span>新增</span>
          </Button>
        </ButtonGroup>
      </div>
      <s-table :url="$apis.app.page" :columns="columns" :params="pageParams" ref="table">
        <template slot="status" slot-scope="{ row }">
          <Tag v-if="row.status===1" color="success">正常</Tag>
          <Tag v-else="" color="error">禁用</Tag>
        </template>
        <template slot="action" slot-scope="{ row }">
          <Button
            size="small"
            type="text"
            @click="handleModal(row)"
            :disabled="row.appId != 'gateway' && $auth('systemAppEdit') ?false:true">
            编辑</Button>
          <Button
            size="small"
            type="text"
            @click="handleResetSecret(row)"
            :disabled="row.appId != 'gateway' && $auth('systemAppEdit') ?false:true">
            重置密钥</Button>
          <Button
            size="small"
            type="text"
            @click="handleRemove(row)"
            :disabled="row.appId != 'gateway' && $auth('systemAppEdit') ?false:true">
            删除</Button>
        </template>
      </s-table>
    </Card>
    <app-modal ref="appModal" @reloadTable="handleSearch"></app-modal>
  </div>
</template>

<script>

import AppModal from './modal'
import STable from '../../../../components/s-table/SearchTable'

export default {
  name: 'SystemApp',
  components: { STable, AppModal },
  data () {
    return {
      pageParams: {
        appId: '',
        appName: '',
        appNameEn: ''
      },
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '应用名称',
          key: 'appName'
        },
        {
          title: '英文名称',
          key: 'appNameEn'
        },
        {
          title: 'AppId',
          key: 'appId'
        },
        {
          title: 'ApiKey',
          key: 'apiKey'
        },
        {
          title: 'SecretKey',
          key: 'secretKey'
        },
        {
          title: '状态',
          slot: 'status',
          key: 'status'
        },
        {
          title: '更新时间',
          key: 'updateTime'
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 200
        }
      ]
    }
  },
  methods: {
    handleModal (data) {
      this.$refs['appModal'].handleShow(data)
    },
    handleResetForm (form) {
      this.$refs[form].resetFields()
    },
    handleSearch () {
      this.$refs['table'].search()
    },
    handleRemove (data) {
      this.$http.delete(this.$apis.app.remove, {
        appId: data.appId
      }, this).then(res => {
        this.handleSearch()
      })
    },
    handleResetSecret (data) {
      this.$http.confirm(this.$apis.app.resetClient, {
        appId: data.appId
      }, { content: '重置后将影响应用正常使用,确定重置吗？' }, this)
        .then(res => {
          this.handleSearch()
        })
    },
    handleTabClick (name) {
      this.current = name
      this.handleModal()
    },
    handleClick (name, row) {
      switch (name) {
        case 'remove':
          this.handleRemove(row)
          break
        case 'resetSecret':
          this.handleResetSecret(row)
          break
      }
    }
  },
  mounted: function () {
    this.handleSearch()
  }
}
</script>
